import { Button, Card, Form, Input, message } from 'antd'
import styles from './index.module.scss'
import login_logo from '@/assets/login-logo.png'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { login } from '@/store/actions/login'
import { useHistory } from 'react-router-dom'
import { customHistory } from '../../utils/history'
const Login = () => {
  const dispatch = useDispatch()
  // const history = useHistory()
  const [messageApi, contextHolder] = message.useMessage()
  const onFinish = async (values) => {
    const { success, message } = await dispatch(login(values))

    if (success) {
      messageApi.open({
        type: 'success',
        content: '登录成功',
        duration: 1,
        onClose: () => {
          customHistory.replace('/home')
          console.log(1111)
        },
      })
    }
  }

  return (
    <div className={styles.root}>
      {contextHolder}
      <Card className="login_card" bordered={false}>
        <div className="logo">
          <img src={login_logo} alt="" />
        </div>
        <Form
          name="basic"
          onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
          validateTrigger="onBlur"
          initialValues={{ mobile: '13800000002', password: '123456' }}
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: '手机号不能为空',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号',
                validateTrigger: 'onBlur',
              },
            ]}
          >
            <Input
              style={{ height: 55 }}
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入您的手机号"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '密码不能为空',
              },
              {
                min: 6,
                max: 16,
                message: '密码的长度在6-16位之间',
                validateTrigger: 'onBlur',
              },
            ]}
          >
            <Input.Password
              style={{ height: 55 }}
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请输入您的密码"
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: '100%', height: 65, fontSize: 24 }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
